<html xmlns:th="http://www.w3.org/1999/xhtml" xmlns:layout="http://www.w3.org/1999/xhtml"
      layout:decorator="user/user_layout"
      th:with="flag='official_register'">

<head>
    <title>注册</title>
</head>

<div layout:fragment="content">
    <input type="hidden" data-is-official="true" />
    <div class="main-register ">
        <div class="register-panel">
            <div class="caption">
                <p>我已注册，立即
                    <!-- Mall 商户系统注册 -->
                    <a th:if="${mall != null}" href="/admin/auth/login">登录</a>
                    <a th:if="${mall == null}" th:href="${routes.path('MAIN_USER_SIGN_IN')}">登录</a>
                </p>

                <h1>账号注册</h1>
            </div>

            <div class="step-bar-container">
                <div class="step-progress">
                    <div class="bar" data-pointing="1"></div>
                </div>
                <ul class="steps">
                    <li data-current="true" data-step="1" class="current">
                        <div>
                            <div class="circle">
                                <i class="fa fa-check"></i>
                            </div>

                            <p>输入帐号</p>
                        </div>
                    </li>
                    <li data-currrent="false" data-step="2" class="yet">
                        <div>
                            <div class="circle fail">
                                2
                            </div>

                            <p>设置密码</p>
                        </div>
                    </li>
                    <li data-current="false" data-step="3" class="yet">
                        <div>
                            <div class="circle">
                                3
                            </div>

                            <p>设置成功</p>
                        </div>
                    </li>
                </ul>
            </div>

            <form th:action="${routes.path('MAIN_USER_REGISTER_SAVE_EMAIL')}" method="POST" autocomplete="off">
                <div class="" data-step="1">
                    <div>
                        <label>登录帐号</label>
                        <div class="input-row">
                            <input type="text" name="username" placeholder="请输入邮箱或手机"/>
                            <i class="fa fa-times"></i>
                        </div>
                    </div>

                    <div class="checkbox-row">
                        <input type="checkbox" checked="checked" disabled="disabled" readonly="true" />
                    <span>
                        我同意并遵守
                        <a th:href="${routes.path('MAIN_PROTOCOL')}" target="_blank">《平台商户服务协议》</a>
                    </span>
                    </div>
                <span class="tips">
                    没有邮箱？先去注册邮箱
                </span>
                </div>

                <div class="hidden" data-step="2">
                    <!--%{&#45;&#45; 下面两个 input 是用来骗浏览器 autofill 的 &#45;&#45;}%-->
                    <input style="display:none" type="text" name="fakeusernameremembered"  />
                    <input style="display:none" type="password" name="fakepasswordremembered"  />
                    <div class="info">
                        <label>登录名</label>

                        <p data-account=""></p>
                    </div>

                    <div class="for-phone">
                        <label>验证码</label>

                        <div class="input-row">
                            <input type="text" class="captcha-input" name="captcha" placeholder="请输入手机验证码"/>
                            <button class="get-captcha">获取手机验证码</button>
                        </div>
                    </div>

                    <div>
                        <label>登录密码</label>

                        <div class="input-row">
                            <input type="password" class="password-input" data-type="password"
                                   name="password"
                                   placeholder="设置密码(6-14位字母、数字、下划线) " autocomplete="off"/>
                        </div>
                    </div>

                    <div>
                        <label>确认密码</label>

                        <div class="input-row">
                            <input type="password" name="repassword" data-type="password" placeholder="确认你的登录密码"
                                   autocomplete="off"/>
                        </div>
                    </div>
                </div>


                <div class="next-btn-wrapper">
                    <input class="btn-rockcent btn-next" type="submit" value="下一步" data-for="register"/>
                </div>
                <p class="error"></p>
            </form>
        </div>
    </div>
</div>
</html>


